{{- define "content" -}}
{{- $pageTitle := .Title -}}
{{- $data := index .Site.Data .Site.Language.Lang -}}
{{- with $data -}}
{{- $faq := sort .faq "weight" -}}
<div class="faq-container col component card">
    <div class="card-header">
        <h1>{{ $pageTitle }}</h1>
    </div>
    <div class="card-body">
        <ul class="nav nav-tabs mb-4" role="tablist">
            {{- range $i, $v := $faq -}}
            <li class="nav-item" role="presentation">
                {{- if eq $i 0 -}}
                <button class="nav-link active" id="faq-{{ $i }}-tab" role="tab" type="button" aria-current="page" data-bs-toggle="tab" data-bs-target="#faq-{{ $i }}-pane" aria-selected="true">
                    {{- .title -}}
                </button>
                {{- else -}}
                <button class="nav-link" id="faq-{{ $i }}-tab"  role="tab" type="button" data-bs-toggle="tab" data-bs-target="#faq-{{ $i }}-pane" aria-selected="false">
                    {{- .title -}}
                </button>
                {{- end -}}
            </li>
            {{- end -}}
        </ul>
        <div class="tab-content">
            {{- range $i, $v := $faq -}}
            <div class="tab-pane fade{{ if eq $i 0}} show active{{ end }}" id="faq-{{ $i }}-pane" role="tabpanel" aria-labelledby="faq-{{ $i }}-tab">
                <div class="accordion" id="faq-{{ $i }}">
                {{- $title := .title -}}
                {{- range $j, $v := .questions }}
                    {{- $id := printf "faq-%d-%d" $i $j -}}
                    <div class="faq accordion-item">
                        <h2 class="accordion-header faq-question">
                            <button class="accordion-button{{ if ne 0 $j }} collapsed{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
                              aria-expanded="{{ if eq 0 $j }}true{{ else }}false{{ end }}">
                                {{- .question -}}
                            </button>
                        </h2>
                        <div id="{{ $id }}" class="accordion-collapse collapse{{ if eq 0 $j }} show{{ end }}" data-bs-parent="#faq-{{ $i }}">
                            <div class="faq-answer accordion-body surface">
                                {{- .answer | $.Page.RenderString -}}
                            </div>
                        </div>
                    </div>
                {{- end -}}
                </div>
            </div>
            {{- end -}}
        </div>
    </div>
</div>
{{- end -}}
{{- end -}}
